<extend name="Common@Layout:layui" />
<block name="title">
    <title>编辑文章</title>
</block>
<block name="style">
<link rel="stylesheet" href="/Public/res/css/global.css">
<css href="/Public/umeditor/themes/default/css/umeditor.css" />
    <style>
    	html{background-color: white !important;}
        body {
            padding: 10px;
            margin-top: 0px !important;
        }
        h1 {
		    font-size: 24px;
		    line-height: 30px;
		    padding: 5px 0;
		}
		h2 {
		    font-size: 18px;
		    line-height: 24px;
		    padding: 5px 0;
		}
		h3 {
		    font-size: 16px;
		    line-height: 22px;
		    padding: 5px 0;
		}
		h4 {
		    font-size: 12px;
		    line-height: 18px;
		    padding: 5px 0;
		}
		h5 {
		    font-size: 10px;
		    line-height: 16px;
		    padding: 5px 0;
		}
		h6 {
		    font-size: 8px;
		    line-height: 14px;
		    padding: 5px 0;
		}
        .layui-fixbar {
            display: none;
        }
        
        ul.imglist li {
            float: left;
            margin-right: 20px;
        }
        
        .img-wrap {
            width: 207px;
            height: 207px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            border: 1px dashed #ccc;
            cursor: pointer;
        }
        
        .img-wrap img {
            width: 100%;
            height: 100%;
        }
        
        ul.imglist li .img-btn {
            margin-top: 5px;
        }
        
        ul.imglist li .img-btn .layui-input-block {
            margin-left: 0;
            margin-bottom: 5px;
        }
        
        ul.imglist li .img-btn .layui-inline {
            margin-right: 0;
            margin-bottom: 0;
        }
        
        .fl {
            float: left;
        }
        
        .fr {
            float: right;
        }
        
        #filelist li {
            border: 1px dashed #ccc;
            padding: 5px 10px 5px 10px;
            font-size: 14px;
            width: 600px;
            margin-bottom: 10px;
        }
        
        #filelist li .fl a {
            line-height: 38px;
            padding: 0 50px 0 10px;
            color: #009688;
            height: 38px;
            display: inline-block;
        }
        
        #filelist li .fl a:hover {
            background: #f8f8f8;
        }
        
        .imgWrapper img {
            height: 100px;
            cursor: pointer;
        }
        
        .progress {
            overflow: hidden;
            height: 20px;
            margin-bottom: 20px;
            background-color: #f5f5f5;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .progress-bar {
            float: left;
            width: 0%;
            height: 100%;
            font-size: 12px;
            line-height: 20px;
            color: #ffffff;
            text-align: center;
            background-color: #337ab7;
            -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
            box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
            -webkit-transition: width 0.6s ease;
            -o-transition: width 0.6s ease;
            transition: width 0.6s ease;
        }
        
        .sr-only {
            display: inline-block;
        }
        .layui-form-label{color: #333;}
		.exams{border:1px solid #d2d2d2;padding-left:10px;padding-right:70px;min-width:400px;min-height: 200px;display: inline-block;padding-bottom: 20px;background-color: #f8f8f8;}
		.exams ul{padding-left:30px;font-size: 14px;}
		.exams ul li{margin-top:10px;height: 30px;line-height: 30px;position: relative;cursor: pointer;}
		.exams ul li span.exam-title{width:100%;background-color: #fff;display: inline-block;border: 1px solid #ddd;padding-right:10px;padding-left: 5px}
		.exams ul li .exam-del{position: absolute;right:-60px;top:0;margin-top: 4px;margin-left: 20px;}
		.move{margin-left: 130px;}
		.exams ul li .listorder{position: absolute;left:-25px;width: 20px;line-height: 30px;height: 30px;padding:0px 5px;}
    </style>
</block>

<block name="main">
    <form class="layui-form layui-form-pane shuaxin close-dialog" action="{:U('edit_post')}" method="post">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本内容</li>
                <li>封面管理</li>
                <li>附件管理</li>
                <li>视频管理</li>
               
           
            </ul>
           
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block">
                            <input type="text" id="title" name="title" value="{$info.title}" placeholder="请输入文章标题" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <span style="color: red;">（图片大小不能超过3M）</span>
                    <div class="layui-form-item">
                        <textarea id="myEditor" style="width:100%;height:240px;" name="content">{$info.content}</textarea>
                    </div>
                    <div class="layui-form-item">
                        <a class="layui-btn layui-btn-normal" onclick="setBase()">一键默认</a>
                        <span style="color: red;">（仅限正文）</span>
                    </div>
                   
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类</label>
                        <div class="layui-input-block">
                            <php>
                                $catArray = array(); if(count($info['cids'])){ foreach($info['cids'] as $cat){ $catArray[] = $cat['cid']; } };
                            </php>
                            <volist name="cats" id="vo">
                            	
	                                <input type="checkbox" name="cids[{$vo.id}]" value="{$vo.id}" title="{$vo.name}" <?php if(in_array($vo[ 'id'],$catArray)) echo 'checked';?> lay-skin="primary">
	                            
                            </volist>
                        </div>
                    </div>
                   
                    
               
                    <div class="layui-form-item">

                    </div>
                    <div class="layui-form-item">
                    	 <input type="hidden" name="is_post" value="3"  autocomplete="off" class="layui-input">
                        <div class="layui-inline" style="width:550px">
                            <label class="layui-form-label">关键词</label>
                            <div class="layui-input-block" style="margin-bottom:10px;">
                                <input type="text" id="keywords" name="keywords" value="{$info.keywords}" placeholder="请输入文章关键词" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">简介</label>
                            <div class="layui-input-block">
                                <textarea name="desc" placeholder="请输入文章简介" class="layui-textarea">{$info.desc}</textarea>
                            </div>
                        </div>
                        <div class="layui-inline" style="vertical-align: top;">
                            <label class="layui-form-label">作者</label>
                            <div class="layui-input-block" style="margin-bottom:10px;">
                                <input type="text" name="author" value="{$info.author}" placeholder="请输入作者，非必需" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">是否发布</label>
                            <div class="layui-input-block" style="margin-bottom:10px;">
                                <input type="checkbox" name="status" lay-skin="switch" value="1" lay-text="发布|关闭"  <?php if($info['status'] == 1)echo checked;?> >
                            </div>
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-block">
                                <input type="number" name="listorder" value="{$info.listorder|default=0}" required lay-verify="required|number" placeholder="请输入排序值" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">原文链接</label>
                            <div class="layui-input-block">
                                <input type="text" name="source" value="{$info.source}" placeholder="请输入原文链接，非必需" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>


                    <div class="layui-form-item">

                    </div>
                </div>
                
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面</label>
                        <div class="layui-input-block">
                            <input type="text" id="fengmian" name="fengmian" style="width:500px;display:inline-block" value="{$info.fengmian}" placeholder="请输入封面图地址" class="layui-input">
                           <!-- <input type="file" name="file" lay-type="image" class="" id="fengmianupload" class="layui-upload-file">-->
                           	<button type="button" class="layui-btn" id="fengmianupload">
							  <i class="layui-icon">&#xe67c;</i>上传图片
							</button>
                            <span style="color: red;">（图片大小不能超过3M）</span>
                            
                        </div>
                        <div style="padding-top:10px;">
                            <div class="img-wrap" id="fengmian-box" style="background:#f8f8f8;text-align:center;">
                                <span style="font-size:60px;line-height:207px;color:#eee;">封面</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">列表图</label>
                        <!--<div class="layui-input-block">
                            <input type="file" name="file" lay-type="image" id="imageupload" class="layui-upload-file">
                        </div>-->
                        <button type="button" class="layui-btn" id="imageupload">
							  <i class="layui-icon">&#xe67c;</i>上传图片
							</button>
                    </div>
                    <div class="layui-form-item">
                        <ul class="imglist layui-clear" id="imglist">
                        </ul>
                        <script id="imglist-tpl" type="text/html">
                            <li id="img-box-{{d.id}}">
                                <div class="img-wrap">
                                    <img src="{{d.url}}" layer-src="{{d.url}}">
                                </div>
                                <div class="img-btn">
                                    <div class="layui-input-block">
                                        <input type="text" name="imgtitles[]" style="width:208px;" value="{{d.title}}" placeholder="图片标题" class="layui-input">
                                    </div>
                                    <div class="layui-input-block">
                                        <input type="text" name="imgredurls[]" style="width:208px;" value="{{d.redurl}}" placeholder="图片跳转地址" class="layui-input">
                                    </div>
                                    <div class="layui-inline" style="margin-right:0;margin-bottom:0;">
                                        <label class="layui-form-label" style="width:80px;">排序：</label>
                                        <input type="hidden" name="imgids[]" value="{{d.id}}">
                                        <input type="number" name="imglistorders[]" style="width:60px;" value="{{d.listorder}}" placeholder="排序值" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-inline" style="margin-right:0;margin-bottom:0;">
                                        <a href="javascript:;" data-id="{{d.id}}" class="layui-btn layui-btn-danger del-image">删除</a>
                                    </div>
                                </div>
                            </li>
                        </script>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <input type="file" name="file" lay-type="file" id="fileupload" class="layui-upload-file">
                    </div>

                    <div class="layui-form-item">
                        <ul class="filelist" id="filelist"></ul>
                        <script id="filelist-tpl" type="text/html">
                            <li class="layui-clear" id="file-box-{{d.id}}">
                                <div class="fl"><a href="{{d.url}}" target="blank">{{d.name}}</a></div>
                                <div class="fr">
                                    <a href="javascript:;" data-id="{{d.id}}" class="layui-btn layui-btn-danger del-file">删除</a>
                                </div>
                                <input type="hidden" name="fileids[]" value="{{d.id}}">
                            </li>
                        </script>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <!-- 视频上传 -->
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width:360px">
                            <label class="layui-form-label">Hash导入</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" style="width:250px;" id="daoru">
                                <input type="hidden" name="video[id]" id="videoId" value="{$info.video.id}">
                                <input type="hidden" id="videoUrl" value="{$info.video.url}">
                            </div>
                        </div>
                        <div class="layui-inline" style="width:360px">
                            <a href="javascript:;" id="daoruBtn" class="layui-btn layui-btn-normal">Hash导入</a>
                            <div id="container" style="display:inline-block">
                                <a class="layui-btn" id="pickfiles" href="javascript:;"><span>上传视频</span></a>
                            </div>
                            <a class="layui-btn layui-btn-danger" id="delvideo" href="javascript:;"><span>删除视频</span></a>
                        </div>
                        <div class="layui-inline">
                            <span style="color: red;">（视频大小不能超过500M）</span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                    	<if condition="!$info['video']['id']">
                    		<table class="layui-table" id="fstable" style="display:none">
                		<else />
                			<table class="layui-table" id="fstable">
                		</if>
                            <thead>
                                <tr>
                                    <th>文件名称</th>
                                    <th>视频大小</th>
                                    <th>详细信息</th>
                                </tr>
                            </thead>
                            <tbody id="fsUploadProgress">

                                <if condition="$info['video']">
                                    <tr class="progressContainer" style="opacity: 1;">
                                        <td class="progressName">{$info.video.filename}
                                            <div class="imgWrapper">
                                                <img src="{$info.video.url}?vframe/jpg/offset/5" onclick="window.open('{$info.video.url}')">
                                            </div>
                                        </td>
                                        <td class="progressFileSize">
                                            <php>$size = sprintf("%.2f", $info['video']['size']/1024/1024);echo $size.'M';</php>
                                        </td>
                                        <td>
                                            <div class="info">
                                                <div class="">
                                                    <strong>地址:</strong>
                                                    <a href="{$info.video.url}" target="_blank"> 
						                    					{$info.video.url}
						                    				</a>
                                                    <div class="hash">
                                                        <strong>Hash:</strong>{$info.video.key}
                                                    </div>
                                                </div>
                                                <a href="javascript:;" class="progressCancel" style="display: none;">×</a>
                                            </div>
                                        </td>
                                    </tr>
                                </if>
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width:360px">
                            <label class="layui-form-label">视频封面帧</label>
                            <div class="layui-input-block">
                                <input type="number" class="layui-input" style="width:250px;" id="vframe" name="video[vframe]" value="{$info.video.vframe|default=5}">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <a href="javascript:;" id="setVframe" class="layui-btn">设定</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">视频封面</label>
                        <div class="layui-input-block">
                            <div class="img-wrap">
                                <if condition="$info['video']['id']">
                                    <img src="{$info['video']['url']}?vframe/jpg/offset/{$info['video']['vframe']}" height="100%" id="videoImg">
                                    <else/>
                                    <img src="/Public/img/default.png" height="100%" id="videoImg">
                                </if>
                            </div>
                        </div>
                    </div>
                </div>
		        <if condition="$exams_info">
		        	<div class="layui-tab-item">
						<div class="layui-form-item">
		                    <div class="layui-box layui-upload-button" style="margin-bottom: 20px;">
		                    	<a class="layui-upload-icon" style="cursor: pointer;" onclick="add_exam()" ><i class="layui-icon"></i>添加试卷</a>
		                    </div>
		                    <div >
		                    	<label class="layui-form-label">已有试卷:</label>
		                    	<div class="exams" id="">
								<!--试卷浏览-->
								
									<ul>
										<volist  name="exams" id="vo" >
											<li>
												<span class="listorder">{$vo.listorder}</span>
												<input type="hidden" value="{$vo.id}" name="eid" class="eid" />
												<span class="exam-title">{$vo.title}</span>
												<a class="layui-btn layui-btn-mini layui-btn-danger exam-del">删除</a>						
											</li>
									    </volist>
									</ul>
								</div>
		                    </div>
		                </div>
		            </div>  
		        </if>
					
                <div class="layui-form-item">
                    <input type="hidden" name="id" value="{$info.id}" id="id">
                    <input type="hidden" name="group" value="{$info.group}" id="group">
                    
                    <button class="layui-btn" lay-filter="*" lay-submit="">立即发布</button>
                </div>
            </div>
        </div>
    </form>

</block>


<block name="script">
    <js href="/Public/umeditor/third-party/jquery.min.js,/Public/umeditor/third-party/template.min.js,/Public/umeditor/umeditor.config.js,/Public/umeditor/umeditor.js,/Public/umeditor/lang/zh-cn/zh-cn.js?v=1.1.1" />
    <js href="/Public/plupload/moxie.js" />
    <js href="/Public/plupload/plupload.dev.js" />
    <js href="/Public/plupload/i18n/zh_CN.js" />
    <js href="/Public/Qiniu/ui.js" />
    <js href="/Public/Qiniu/qiniu.js" />
    <js href="/Public/Qiniu/main.js" />
    <js href="/Public/plupload/jquery.zxfdragsort.js?v=1" />
    <script>
        //实例化编辑器
        var um = UM.getEditor('myEditor', {
	        toolbar: [
	            'undo redo | bold italic underline | removeformat |',
	            'insertorderedlist insertunorderedlist | selectall cleardoc | paragraph fontfamily fontsize',
	            '| justifyleft justifycenter justifyright justifyjustify |',
	            ' image',
	            '| horizontal '
	        ]
	    });
        layui.use(['jquery', 'content'], function() {
            var $ = layui.layer,
                content = layui.content;

        });
		
        $('#setVframe').click(function() {
            var url = $('#videoUrl').val();
            var vframe = $('#vframe').val();
            if (url) {
                if (isInteger(parseInt(vframe)) && parseInt(vframe) >= 0) {
                    $('#videoImg').attr('src', $('#videoUrl').val() + "?vframe/jpg/offset/" + vframe);
                    $('#fengmian').val($('#videoUrl').val() + "?vframe/jpg/offset/" + vframe);
                } else {
                    alert('请输入大于等于0的整数');
                    $('#vframe').focus();
                }
            }
        });
        $('#delvideo').click(function() {
            var $this = $(this);
            var asker = layer.confirm('确定删除视频吗？', function() {
                var ii = layer.msg('数据处理中...', {
                    icon: 16,
                    time: 10000
                });
                $('#fstable').hide();
                $('#fsUploadProgress').html('');
                $('#showVideo').attr('src', '/content/media/play');
                $('#videoId').val('');
                $('#videoUrl').val('');
                $('#videoImg').attr('src', '/Public/img/default.png');
                layer.close(ii);
                layer.alert('删除成功，不过需要保存后生效！');
            });
        });
        $('#daoruBtn').click(function() {
            if ($('#daoru').val()) {
                var ii = layer.msg('数据处理中...', {
                    icon: 16,
                    time: 10000
                });
                $.post('/content/media/findvideo', {
                    "key": $('#daoru').val()
                }, function(data) {
                    layer.close(ii);
                    if (data.status) {
                        var video = data.data;
                        $('#fstable').show();
                        var html = '<tr class="progressContainer" style="opacity: 1;">' +
                            '<td class="progressName">' + video.filename + '<div class="imgWrapper"><img onclick="window.open(\'' + video.url + '\')" src="' + video.url + '?vframe/jpg/offset/5"></div></td>' +
                            '<td class="progressFileSize">' + Math.floor(parseInt(video.size) / 1024 / 1024 * 100) / 100 + 'M</td>' +
                            '<td>' +
                            '<div class="info">' +
                            '<div class="">' +
                            '<strong>地址:</strong>' +
                            '<a href="' + video.url + '" target="_blank">' + video.url + '</a>' +
                            '<div class="hash">' +
                            '<strong>Hash:</strong>' + video.key +
                            '</div>' +
                            '</div>' +
                            '<a href="javascript:;" class="progressCancel" style="display: none;">×</a>' +
                            '</div>' +
                            '</td>' +
                            '</tr>';
                        $('#fsUploadProgress').html(html);
                        $('#showVideo').attr('src', '/material/media/play/id/' + video.id);
                        $('#videoId').val(video.id);
                        $('#videoUrl').val(video.url);
                        $('#vframe').val(video.vframe)
                        var vframe = $('#vframe').val();
                        $('#videoImg').attr('src', $('#videoUrl').val() + "?vframe/jpg/offset/" + vframe);
                    $('#fengmian').val($('#videoUrl').val() + "?vframe/jpg/offset/" + vframe);
                    } else {
                        layer.alert(data.info);
                    }
                });
            } else {
                $('#daoru').focus();
            }
        });

        function isInteger(obj) {
            return obj % 1 === 0
        }
        
        //一键默认格式
        function setBase(){
        	$('.edui-editor-body p').each(function(){
        		$this = $(this);
        		if($this.css('text-align') == 'center' || $this.css('text-align') == 'right' || $this.find('img').length > 0){
        			if($this.find('img').length > 0){
        				var imgW = $this.find('img').width();
        				var imgH = $this.find('img').height();
        				var nowH = 688*imgH/imgW;
        				$this.css('text-align','center');
        				$this.find('img').css('width','688px');
        				$this.find('img').css('height',nowH+'px');
        				$this.css('text-indent','0px');
        			}
        		}else{
        			$this.css('font-size','16px');
        			$this.css('text-indent','2em');
        			$this.css('line-height','32px');
        			$this.css('line-height','32px');
        			$this.css('font-family','微软雅黑');
        			var str = $this.html();
        			str = str.replace('&nbsp;', ""); 
        			$this.html(str);
        		}
        	});
        	setTimeout($('#myEditor').val($('.edui-editor-body .edui-body-container').html()),2000); 
        	
        }
        
        function add_exam(){
        	var eids = '';
        	$('.exams ul li').each(function(i,vo){
				var eid = $(vo).find('.eid').val();
				if(eid){
					eids += eid+'|';
				}				
			});
			eids = eids.substring(0,eids.length-1);
        	open_iframe_dialog('/admin/content/add_exam?eids='+eids+'','选择试卷',['100%','100%'],0);
        }
        del_exam();
        function del_exam(){
        	$(".exam-del").click(function(){				
				$(this).parent('li').remove();
			});
        }
        del_tixu();
        function del_tixu(){
			var i=1;
			$('.exams ul li').each(function(){
				$this = $(this);
				$this.find('.listorder').text(i+'.');
				i++;
			});
			
		}
        get_exams();
        function get_exams(){
        	var exam_arr = ''; 
        	var i = 0;
        	var j = 1;
        	$('.exams ul li').each(function(){				
				$this = $(this);
				var listorder = j;
				var eid = $this.find('.eid').val();
				exam_arr += eid+','+listorder+'|';
				j++
			});
			exam_arr = exam_arr.substring(0,exam_arr.length-1);
			$('#exam_list').val(exam_arr);
			
        }
        
        $('.exams ul').lxddragsort();
        
    </script>
</block>